<template>
  <view class="flex-sb-center">
    <view class="flex">
      <view 
        class="tab-item font-size-26rpx mr-44rpx" 
        v-for="item in tabList" :key="item.id"
        :class="{ 'active': item.typeCode === tab }"
        @click="changeTab(item.typeCode)"
      >
        <view class="inline-block" 
          :class="{ 'active-text': item.typeCode === tab }"
        >{{ item.typeName }}</view>
      </view>
    </view>
    
    <view class="font-size-26rpx flex-a-center max-w-260rpx" @click="handleShowCity"
      v-if="isShowCity"
    >
      <i class="iconfont icon-frame font-size-36rpx mr-8rpx color-#9C6DEF"></i>
      <text class="ellipsis mb-2rpx">
        {{ address }}
      </text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { PropType } from 'vue';
import { Main } from '@/service/types';

const emit = defineEmits(['changeTab', 'showCity'])
defineProps({
  tab: {
    type: String,
    default: ''
  },
  tabList: {
    type: Array as PropType<Main.DictInfo[]>,
    default: () => []
  },
  address: {
    type: String,
    default: '全国'
  },
  isShowCity: {
    type: Boolean,
    default: true
  },
})

const handleShowCity = () => {
  emit('showCity')
}

const changeTab = (id) => {
  emit('changeTab', id)
}
</script>

<script lang="ts">
export default {
  // 微信小程序开启样式穿透
  options: { styleIsolation: "shared" },
};
</script>

<style lang="scss" scoped>
.tab-item {
  padding-bottom: 2rpx;
  box-sizing: border-box;
  border-bottom: 2px solid rgba(0, 0, 0, 0);
}
.active {
  color: #986DF0;
  border-bottom: 2px solid #986DF0;
}
.active-text {
  transform: scale(1.1);
  transform-origin: center bottom;
}
</style>
